<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router';
import * as admin from '@/api/indexdata.js';
import {ElMessage} from 'element-plus'
// import useUserInfoStore from '@/stores/userInfo.js'
const route = useRoute();  // 获取当前路由
import { useRouter } from 'vue-router';
const router = useRouter();
import {useTokenStore} from '@/stores/token.js'
import useUserInfoStore from '@/stores/userInfo.js'
const tokenStore = useTokenStore();
const userInfoStore = useUserInfoStore();
const get_login = () => {
  const user_data = userInfoStore.info
  const user_token = tokenStore.token
  console.log(user_data.status);
  console.log(user_token);
  if(!user_token || user_data.status != '2'){
    // console.log('未登录');
    router.push('/login')
  }
};
get_login();


const JinquId = route.query;  // 获取路径参数


const total = ref(0)
const imgList = ref([])
const jinquData = ref({})
const pinlunList = ref([])

const centerDialogVisible = ref(false)
// 时间选择器
const yuyue_date = ref(null)

const getJinquData = async () => {
    const param = {
        id: JinquId.jinquId
    }
    const res = await admin.articleImageDataService(param)
    jinquData.value = res.data[0]
}

const getImgList = async () => {
    const param = {
        jinquId: JinquId.jinquId
    }
    const res = await admin.articleImageListService(param);
    imgList.value = res.data
}

const getPinlunList = async () => {
    const param = {
        jinquId: JinquId.jinquId
    }
    const res = await admin.articlePinlunListService(param);
    pinlunList.value = res.data
    total.value = res.total
}

const formatDate = (date) => {
    const d = new Date(date);
    return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`;
};

const currentPage = ref(1);
const pageSize = ref(10);
const handlePageChange = (page) => {
  currentPage.value = page;
  updatePaginatedComments();
};


const yuyue = async () => {
  const param = {
      jinquId: JinquId.jinquId,
      yyTime: yuyue_date.value.toISOString(),
      userId:userInfoStore.info.id,
  }
  const res = await admin.addYuyueService(param);
  if (res.code === 0) {
    ElMessage.success(res.msg? res.msg:'预约成功');
  }
  centerDialogVisible.value = false
}

onMounted(() => {
    getImgList();
    getJinquData();
    getPinlunList();
})

</script>

<template>
  <el-main>
    <el-row :gutter="20" justify="center">
      <el-col :span="16">
        <!-- 图片轮播 -->
        <el-carousel :interval="4000" type="card" height="300px">
          <el-carousel-item v-for="(item, index) in imgList" :key="index">
            <img :src="item.img" alt="carousel image" class="carousel-image" />
          </el-carousel-item>
        </el-carousel>

        <!-- 景区详情 -->
        <div class="jinqu-info">
          <h2>{{ jinquData.name }}</h2>
          <h3><strong>别名：</strong>{{ jinquData.nickName || '暂无别名' }}</h3>
          <p><strong>景区描述：</strong>{{ jinquData.content }}</p>
          <p><strong>地址：</strong>{{ jinquData.address }}</p>
          <p><strong>门票价格：</strong>{{ jinquData.ticketPrice || '待定' }}</p>
          <p><strong>开放时间：</strong>{{ jinquData.openTime }}</p>

          <!-- 预约门票按钮 -->
          <!-- <el-button type="primary" @click="centerDialogVisible = true" class="reserve-btn">预约门票</el-button> -->
          <el-button 
            :type="jinquData.status === '禁止预约' ? 'info' : 'primary'" 
            :disabled="jinquData.status === '禁止预约'"
            @click="centerDialogVisible = true"
            :class="['reserve-btn', jinquData.status === '禁止预约' ? 'disabled-btn' : '']"
          >
            {{ jinquData.status === '禁止预约' ? '禁止预约' : '预约门票' }}
          </el-button>




        </div>

        <div class="comments-section">
            <h3>评论列表</h3>
            <el-divider></el-divider>

            <div v-for="(comment, index) in pinlunList" :key="index" class="comment-item">
                <el-rate v-model="comment.fenshu" disabled></el-rate>
                <div class="comment-author">{{ comment.nickName }}</div>
                <div class="comment-content">{{ comment.content }}</div>
                <div class="comment-time">{{ formatDate(comment.createTime) }}</div>
                <el-divider></el-divider>
            </div>
            <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            @current-change="handlePageChange"
            layout="prev, pager, next, jumper"
            />
        </div>
      </el-col>
    </el-row>
    <el-dialog
    v-model="centerDialogVisible"
    title="预约"
    width="30%"
    align-center>
    <span>
      <div class="block">
      <span class="demonstration">预约时间</span>
      <el-date-picker
          v-model="yuyue_date"
          type="date"
          placeholder="选择日期"
          class="filter-item" 
        ></el-date-picker>
    </div>
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="yuyue()">
          确认预约
        </el-button>
      </span>
    </template>
  </el-dialog>
  </el-main>
</template>

<style scoped>
/* 背景色及内边距 */
/* 背景色及内边距 */
.el-main {
  height: auto;
  background-color: #f4f7fc;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 图片轮播 */
.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* 景区详情 */
.jinqu-info {
  background-color: #ffffff;
  padding: 20px;
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.jinqu-info h2 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.jinqu-info h3 {
  font-size: 18px;
  color: #666;
  margin-top: 10px;
}

.jinqu-info p {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
  margin-top: 10px;
}

/* 预约按钮通用样式 */
.reserve-btn {
  margin-top: 20px;
  font-weight: bold;
  width: 100%;
  border-radius: 6px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* 启用状态：蓝色 */
.reserve-btn:not(.disabled-btn) {
  background-color: #409eff;
  border-color: #409eff;
  color: white;
}

.reserve-btn:not(.disabled-btn):hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

/* 禁止预约状态：灰色 */
.reserve-btn.disabled-btn {
  background-color: #c0c4cc !important;
  border-color: #c0c4cc !important;
  color: white !important;
  cursor: not-allowed;
}

/* 评论区 */
.comments-section {
  background-color: #ffffff;
  padding: 20px;
  margin-top: 40px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.comments-section h3 {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.comment-item {
  padding: 10px;
  background-color: #f9f9f9;
  margin-bottom: 15px;
  border-radius: 8px;
}

.comment-author {
  font-weight: bold;
  color: #409eff;
}

.comment-content {
  margin-top: 10px;
  font-size: 16px;
  color: #555;
}

.comment-time {
  margin-top: 5px;
  font-size: 14px;
  color: #999;
}

.el-divider {
  margin: 15px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .el-main {
    padding: 10px;
  }

  .jinqu-info h2 {
    font-size: 20px;
  }

  .jinqu-info h3 {
    font-size: 16px;
  }

  .jinqu-info p {
    font-size: 14px;
  }

  .reserve-btn {
    width: 100%;
  }
}

</style>
